<template>
    <Popup ref="popupRef" :title="modeTitle" :formState="formData" :rules="rules" :editApi="updateMenu"
        :addApi="saveMenu" @success="success">

        <template #default="{ formState }">
            <a-form-item label="菜单类型" name="type">
                <a-radio-group v-model:value="formState.type" @change="handleTypeChange">
                    <a-radio :value="MenuType.CATALOGUE">目录</a-radio>
                    <a-radio :value="MenuType.MENU">菜单</a-radio>
                    <a-radio :value="MenuType.BUTTON">按钮</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="菜单名称" name="name">
                <a-input v-model:value="formState.name" allowClear />
            </a-form-item>

            <a-form-item label="菜单路径" v-if="formState.type != MenuType.BUTTON" name="path">
                <a-input v-model:value="formState.path" allowClear />
            </a-form-item>

            <a-form-item label="父级菜单" name="parent_id">
                <m-form-auth v-model:modelValue="formState.parent_id" />
            </a-form-item>

            <a-form-item label="菜单图标" name="icon" v-if="formState.type != MenuType.BUTTON">
                <a-form-item-rest>
                    <icon-picker v-model:modelValue="formState.icon" />
                </a-form-item-rest>
            </a-form-item>

            <a-form-item label="菜单选择" name="select" v-if="formState.type != MenuType.BUTTON && formState.type != MenuType.CATALOGUE">
                <a-input v-model:value="formState.select" allowClear placeholder="请输入菜单选择" />
            </a-form-item>

            <a-form-item label="api接口" name="perms" v-if=" formState.type != MenuType.CATALOGUE">
                <a-input v-model:value="formState.perms" allowClear placeholder="请输入api接口" />
                <div class="form-tip">
                    <!-- <Icon name="ant-icon-InfoCircleOutlined"  class="pr-1"/> -->
                    <div>
                        {app} ： 应用名称 (项目根目录/app/下创建的文件夹名称) <br>
                        {controller} ： 控制器名称 (项目根目录/app/下创建的文件夹名称/controller/下创建的文件夹名称) 如果是多级目录，则用.连接<br>
                        {action} ： 方法名称 (项目根目录/app/下创建的文件夹名称/controller/下创建的文件夹名称/方法名称)
                    </div>

                    <div>
                        接口地址 /{app}/{controller}/{action}
                    </div>
                </div>
            </a-form-item>

            <a-form-item label="是否隐藏" name="hidden">
                <a-switch v-model:checked="formState.hidden"   checked-children="隐藏" un-checked-children="显示" />
            </a-form-item>

            <a-form-item v-if="formState.type != MenuType.CATALOGUE && formData.type != MenuType.BUTTON" label="组件路径"
                name="component">
                <m-form-components v-model:modelValue="formState.component" />
            </a-form-item>

        </template>

    </Popup>
</template>

<script setup lang="ts">
import { MenuType } from '@/utils/enums/appEnums'
import { saveMenu, updateMenu } from '@/api/system/permission/auth'
const popupRef = ref()
const formRef = ref()

const emits = defineEmits<{
    (e: 'success', data?: any): void
}>()
const mode = ref<string>('add')
const modeTitle = computed(() => {
    return mode.value === 'add' ? '新增菜单' : '编辑菜单'
})

interface FormData {
    id?: number | null
    type: number
    path: string
    name: string
    parent_id: number
    component: string | null
    icon: string
    perms: string
    hidden: boolean
    select: string
}
const formData = reactive<FormData>({
    id: null,
    type: MenuType.CATALOGUE,
    path: '',
    name: '',
    parent_id: 0,
    component: null,
    icon: '',
    perms: '',
    select:'',
    hidden: false,
})

const open = (active: string, record?: any) => {
    mode.value = active
    popupRef.value.open(active, record)
    nextTick(() => {
        if (record) {
            setFormData(record)
        }
    })
}

const setFormData = async (record: Record<any, any>) => {

    if (record) {
        // 使用解构赋值来合并数据
        const { children, ...rest } = record;

        for (const key in formData) {
            if (rest[key] != null && rest[key] != undefined) {
                //@ts-ignore
                formData[key] = rest[key]
            }
        }


    }

}


const rules = {
    type: [{ required: true, message: '请选择菜单类型' }],
    path: [
        { required: true, message: '请输入菜单路径' },
        // 菜单只能输入英文
        { pattern: /^[a-zA-Z]+$/, message: '菜单路径只能输入英文' }
    ],
    name: [{ required: true, message: '请输入菜单名称' }],
    component: [{ required: true, message: '请选择组件' }]
}

const handleTypeChange = (value: number) => {
    switch (value) {
        case MenuType.CATALOGUE:
            formData.select = ''
            break
        case MenuType.MENU:
            formData.select = ''
            break
        case MenuType.BUTTON:
            formData.select = ''
            break
    }
}

const success = () => {
    emits('success')
}

defineExpose({
    open,
})
</script>
